<!-- 拖拽滑动 -->
<template>
  <div id="default_drag_comp">
    <slot >
    </slot>
  </div>
</template>

<script>
export default {
  name: 'defaultDrag',
  data() {
    return {
      flags: false,
      position: { x: 0, y: 0 },
      nx: '',
      ny: '',
      dx: '',
      dy: '',
      xPum: '',
      yPum: '',
      boxEl: null,
      nodes: [],
    }
  },

  components: {},

  computed: {},

  mounted() {
    if (this.$slots) {
      this.nodes = this.$slots.default
      this.nodes = this.nodes.filter((item) => {
        return item.tag
      })
      this.boxEl = this.nodes[0].elm //只取第一个元素
      // 可以主动抛出错误
      // console.log(this.nodes);
    }
    // -------------------------
    // for (let i = 0; i< this.$slots.default.length; i++) {
    //   if (this.$slots.default[i].elm.nodeType !== 3) {
    //     this.boxEl = this.$slots.default[i].elm;
    //   }
    // }
    console.log(this.boxEl)
    this.boxEl.addEventListener('click', this.goNext, false)
    this.boxEl.addEventListener('touchstart', this.down, false)
    this.boxEl.addEventListener('touchmove', this.move, false)
    this.boxEl.addEventListener('touchend', this.end, false)
  },

  methods: {
    goNext() {
      this.$emit('goNext')
    },
    // 实现移动端拖拽
    down() {
      let default_drag_comp = this.boxEl
      this.flags = true
      var touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      this.maxW = document.body.clientWidth - default_drag_comp.offsetWidth
      this.maxH = document.body.clientHeight - default_drag_comp.offsetHeight

      this.position.x = touch.clientX - default_drag_comp.offsetLeft
      this.position.y = touch.clientY - default_drag_comp.offsetTop
      this.dx = touch.clientX
      this.dy = touch.clientY
    },
    move(event) {
      event.preventDefault()
      let default_drag_comp = this.boxEl
      if (this.flags) {
        var touch
        if (event.touches) {
          touch = event.touches[0]
        } else {
          touch = event
        }
        this.nx = touch.clientX - this.position.x
        this.ny = touch.clientY - this.position.y

        if (this.nx < 0) {
          this.nx = 0
        } else if (this.nx > this.maxW) {
          this.nx = this.maxW
        }

        if (this.ny < 0) {
          this.ny = 0
        } else if (this.ny >= this.maxH) {
          this.ny = this.maxH
        }

        default_drag_comp.style.left = this.nx + 'px'
        default_drag_comp.style.top = this.ny + 'px'
        //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        document.addEventListener(
          'touchmove',
          function () {
            // event.preventDefault();
          },
          false
        )
      }
    },
    //鼠标释放时候的函数
    end() {
      this.flags = false
    },
  },
}
</script>
<style scoped lang="less">
#default_drag_comp {
  position: fixed;
  z-index: 1000;
  //   样式
//   border-radius: 0.4267rem 0rem 0rem 0.4267rem;
//   background: rgba(5, 18, 42, 0.7);
//   padding: 0 0.2933rem;
//   line-height: 0.8533rem;
//   font-size: 0.3733rem;
//   color: #fff;
//   span {
//     position: relative;
//     top: 0.0533rem;
//     border-radius: 4px;
//     display: inline-block;
//     width: 0.07rem;
//     height: 0.32rem;
//     background: #ff025d;
//     margin-right: 0.08rem;
//   }
//   span:nth-of-type(2) {
//     height: 0.45rem;
//     background: #ff167c;
//   }
//   span:nth-of-type(3) {
//     height: 0.24rem;
//     background: #ff2ea0;
//     margin-right: 0.1867rem;
//   }
}
</style>